<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资料详情</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/static/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/static/css/sm.min.css">
    <link rel="stylesheet" href="/static/css/sm-extend.min.css">
    <style>
        .content-block {
            padding: 0;
            margin: .75rem .5rem;
        }

        .list-block ul li {
            padding: 0 !important;
        }

        .list-block ul ul, .list-block ul ul ul {
            display: none;
            padding-left: 1rem !important;
            transition: height 0.4s ease;
            -moz-transition: height 0.4s ease;
            -webkit-transition: height 0.4s ease;
            -o-transition: height 0.4s ease;
        }

        .list-block ul li:active {
            background-color: #dddddd;
        }

        .tc {
            width: 100%;
            height: 2.5rem;
        }

        p {
            margin: 0.4rem 0 !important;
        }

        .content-padded {
            padding: 0.2rem 0;
            background: white;
            border-radius: 0.3rem;
        }

        .card {
            width: 47% !important;
            border-radius: 0.3rem;
            float: left;
            margin: 0 0 3% 3%;
        }

        .card-footer, .card-header {
            padding: 0.3rem !important;
        }

        .card-footer:before {
            left: auto;
            width: 90%;
        }

        .row > .col-33:active {
            background: gainsboro;
        }
        .classImg{
            border-radius: 0.3rem;
            width: 100%;
            height: auto;
        }
        .className,.className1{
            padding: 0.5rem 0;
            font-size: 18px;
            font-weight: 600;
        }

        .classDetail{
            text-indent: 28px;
        }
        .classMat{
            margin: 0.5rem!important;
        }
    </style>
</head>
<body>

<div class="page">
    <header class="bar bar-nav">
        <a class="icon icon-left pull-left" href="javascript:window.history.back(-1);"></a>
        <h1 class="title">资料详情</h1>
    </header>
    <div class="content">
        <div class="content-block">
            <div class="className"></div>
            
            <div class="" style="text-align: right;display: flex;justify-content: space-between">
                <div class="program">学习进度：</div>
                <a href="#"  class="prompt-ok button button-fill">评价</a>
                <div class="start"><span class="icon icon-star" style="margin-right: 0.5rem"></span></div>
                
            </div>
            <img src="" class="classImg" onerror="this.src='/static/img/loadFail.png';this.onerror='null'" />

            <div class="classDetail"></div>
        </div>
    </div>
</div>

<script type='text/javascript' src='/static/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm-extend.min.js' charset='utf-8'></script>
<script type="text/javascript" src="/static/js/deatilPage.js" charset="utf-8"></script>
<script type="text/javascript">

    //    页面初始化
    let userInfo = JSON.parse(localStorage.getItem('userInfo'));
    let matId = "";

    $(document).ready(function (paras) {
        if(!userInfo||userInfo == {}){
            $.alert('您未登录，点击确定去登录', '提示', function(){
                loginPage();
            })
            return false;
        }


        var url = location.search; //获取url中"?"符后的字串
        var strs = url.split("=");
        matId = strs[1];
        loadMat(strs[1]);
    })

    function loadMat(id) {
            $.ajax({
                url: "/front/user/materialDetail",
                type: 'get',
                dataType: 'json',
                data: {'mId': id,"userId":userInfo.id},
                success: function (re) {
                    var data = re.data
                    $(".classImg").attr("src",data.imgUrl);
                    $(".className").html(data.title);
                    $(".classDetail").html(data.content);
                    $(".start").append(data.num);
                    $(".program").append((data.program*100).toFixed(2)+"%");
                }
            });
    }

    $(document).on('click','.prompt-ok', function () {
        $.prompt('请填写您对该资料的评价。', function (value) {
            $.ajax({
                url: "/front/user/evaluation",
                type: 'post',
                dataType: 'json',
                data: {'mId': matId,"userId":userInfo.id,"note":value},
                success: function (re) {
                    if(re.status){
                        $.alert('评价失败或您已评价');
                    }else {
                        $.alert('评价成功');
                    }
                }
            });
        });
    });
    
    $('.start').click(function () {
      var s =   $('.start').html();
      let num = s.split(">");
      num[num.length-1]++;
      $('.start').html("<span class=\"icon icon-star\" style=\"margin-right: 0.5rem;color: orange\"></span>"+num[num.length-1]);
    })
</script>
</body>
</html>